<template>
  <div>
    <div class="content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公司名字" class="form-header">
          <el-input v-model="formInline.companyName" placeholder="公司名字"></el-input>
        </el-form-item>
        <el-form-item label="用户名" class="form-header">
          <el-select v-model="formInline.userId" placeholder="请选择" class="slect">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广顾问" class="form-header">
          <el-input v-model="formInline.promotionConsultant" placeholder="推广顾问"></el-input>
        </el-form-item>
        <el-form-item label="网  址" class="form-header">
          <el-input v-model="formInline.website" placeholder="网  址"></el-input>
        </el-form-item>
        <el-form-item label="网站名" class="form-header">
          <el-input v-model="formInline.websiteName" placeholder="网站名"></el-input>
        </el-form-item>
        <el-form-item label="顾问电话" class="form-header">
          <el-input v-model="formInline.consultantPhone" placeholder="顾问电话"></el-input>
        </el-form-item>
        <el-form-item label="信息状态" class="form-header">
          <el-select v-model="formInline.infoStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in [
                {
                  vlaue: '通过',
                  label: '通过',
                },
                {
                  vlaue: '不通过',
                  label: '不通过',
                },
                {
                  vlaue: '账户余额为零',
                  vlaue: '账户余额为零',
                  
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="资质状态" class="form-header">
          <el-select v-model="formInline.qualificationsStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合规状态" class="form-header">
          <el-select v-model="formInline.complianceStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加V状态" class="form-header">
          <el-select v-model="formInline.addvStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信用状态" class="form-header">
          <el-select v-model="formInline.creditStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保证金状态" class="form-header">
          <el-select v-model="formInline.marginStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索推广余额" class="form-header">
          <el-input v-model="formInline.searchBalance" placeholder="搜索推广余额"></el-input>
        </el-form-item>
        <el-form-item label="搜索推广预算" class="form-header">
          <el-select v-model="formInline.searchBudget" placeholder="请选择" class="slect">
            <el-option
              v-for="item in [
                { value: '1', label: '正常' },
                { value: '2', label: '预算撞线' },
                { value: '3', label: '预算超线' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息流余额" class="form-header">
          <el-input v-model="formInline.infoFlowBalance" placeholder="信息流余额"></el-input>
        </el-form-item>
        <el-form-item label="信息流预算" class="form-header">
          <el-select v-model="formInline.infoFlowBudget" placeholder="请选择" class="slect">
            <el-option
              v-for="item in [
                { value: '1', label: '正常' },
                { value: '2', label: '预算撞线' },
                { value: '3', label: '预算超线' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电商推广余额" class="form-header">
          <el-input v-model="formInline.ecommerceBalance" placeholder="电商推广余额"></el-input>
        </el-form-item>
        <el-form-item label="电商推广预算" class="form-header">
          <el-select v-model="formInline.ecommerceBudget" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索推广禁推状态" class="form-header">
          <el-select v-model="formInline.searchProhibit" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息流业务端禁推状态" class="form-header">
          <el-select v-model="formInline.infoFlowProhibit" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电商推广禁推状态" class="form-header">
          <el-select v-model="formInline.ecommerceProhibit" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="媒体端禁推状态" class="form-header">
          <el-select v-model="formInline.mediumProhibit" placeholder="请选择" class="slect">
            <el-option
              v-for="item in ['手百通过', '贴吧通过 ', '网盟通过']"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索推广状态" class="form-header">
          <el-select v-model="formInline.searchPromotionStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息流状态" class="form-header">
          <el-select v-model="formInline.infoPromotionStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电商推广状态" class="form-header">
          <el-select v-model="formInline.ecommercePromotionStatus" placeholder="请选择" class="slect">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录时间" class="form-header">
          <el-input v-model="formInline.loginTime" placeholder="登录时间"></el-input>
        </el-form-item>
        <el-form-item label="行业信息" class="form-header">
          <el-input v-model="formInline.industryInfo" placeholder="行业信息"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" class="form-header">
          <el-input v-model="formInline.whereCity" placeholder="所在城市"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址" class="form-header">
          <el-input v-model="formInline.mailAddress" placeholder="通讯地址"></el-input>
        </el-form-item>
        <el-form-item label="联系人" class="form-header">
          <el-input v-model="formInline.contacts" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item label="座机" class="form-header">
          <el-input v-model="formInline.landline" placeholder="座机"></el-input>
        </el-form-item>
        <el-form-item label="手机" class="form-header">
          <el-input v-model="formInline.phone" placeholder="手机"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" class="form-header">
          <el-input v-model="formInline.postalCode" placeholder="邮政编码"></el-input>
        </el-form-item>
        <el-form-item label="Email" class="form-header">
          <el-input v-model="formInline.email" placeholder="Email"></el-input>
        </el-form-item>
        <el-form-item label="传真" class="form-header">
          <el-input v-model="formInline.fax" placeholder="传真"></el-input>
        </el-form-item>
        <el-form-item label="发票邮寄联系人" class="form-header">
          <el-input v-model="formInline.invoiceMailingContacts" placeholder="发票邮寄联系人"></el-input>
        </el-form-item>
        <el-form-item label="发票邮寄联系电话" class="form-header">
          <el-input v-model="formInline.invoiceMailingPhone" placeholder="发票邮寄联系电话"></el-input>
        </el-form-item>
        <el-form-item label="发票邮寄邮政编码" class="form-header">
          <el-input v-model="formInline.invoiceMailingCode" placeholder="发票邮寄邮政编码"></el-input>
        </el-form-item>
        <el-form-item label="发票邮寄地址" class="form-header">
          <el-input v-model="formInline.invoiceMailingAddress" placeholder="发票邮寄地址"></el-input>
        </el-form-item>
        <el-form-item label="信用认证" class="form-header">
          <el-select v-model="formInline.creditAuth" placeholder="信用认证" class="slect">
            <el-option v-for="item in ['已认证', '待认证']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信用值" class="form-header">
          <el-input v-model="formInline.creditValue" placeholder="信用值"></el-input>
        </el-form-item>
        <el-form-item label="安全评分" class="form-header">
          <el-select v-model="formInline.safetyRating" placeholder="安全评分" class="slect">
            <el-option
              v-for="item in ['1', '2', '3', '4', '5']"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TODO: -->
        <!-- <el-collapse v-model="activeNames">
          <el-collapse-item
            v-if="(item, _index) in formInline.accountExList"
            title="账户其他信息"
            :name="_index"
          >
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
        </el-collapse>-->
      </el-form>
    </div>
    <div class="queding">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" plain @click="btnQuxiao">取消</el-button>
    </div>
  </div>
</template>
<script>
import { add, edit, listAllUser } from "@/api/caiwu/zhgl";
import { mapState } from "vuex";

export default {
  name: "zhanghugai",
  data() {
    return {
      activeNames: 0,
      formInline: {
        userId: "",
        companyName: "",
        promotionConsultant: "", //
        website: "", //
        websiteName: "", //
        consultantPhone: "", //
        infoStatus: "", //
        marginStatus: "", //
        qualificationsStatus: "", //
        complianceStatus: "", //
        creditStatus: "", //
        addvStatus: "", //
        searchBalance: "", //
        creditStatus: "", //
        addvStatus: "", //
        searchBalance: "", //
        searchBudget: "", //
        infoFlowBalance: "", //
        infoFlowBudget: "", //
        ecommerceBalance: "", //
        ecommerceBudget: "", //
        searchProhibit: "", //
        infoFlowProhibit: "", //
        ecommerceProhibit: "", //
        mediumProhibit: "", //
        searchPromotionStatus: "", //
        infoPromotionStatus: "", //
        ecommercePromotionStatus: "", //
        loginTime: "", //
        industryInfo: "", //
        whereCity: "", //
        mailAddress: "", //
        contacts: "", //
        landline: "", //
        phone: "", //
        postalCode: "", //
        email: "", //
        fax: "", //
        invoiceMailingContacts: "", //
        invoiceMailingPhone: "", //
        invoiceMailingCode: "", //
        invoiceMailingAddress: "", //
        creditAuth: "", //
        creditValue: "", //
        safetyRating: "", //
        accountExList: [
          // {
          //   mailAddress: "", //
          //   contacts: "", //
          //   landline: "", //
          //   phone: "", //
          //   postalCode: "", //
          //   email: "", //
          //   fax: "" //
          // }
        ] //
      },
      options2:[
        {
          value: "通过",
          label: "通过"
        },
        {
          value: "不通过",
          label: "不通过"
        }
        ,
        {
          value: "账户余额为零",
          label: "账户余额为零"
        }
      ],
      options: [
        {
          value: "通过",
          label: "通过"
        },
        {
          value: "不通过",
          label: "不通过"
        }
      ],
      userList: []
    };
  },
  computed: {
    ...mapState(["user"])
  },
  props: {
    // 编辑数据
    objData: {
      type: Object,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 根据用户角色判断当前用户是否管理员角色，是则可下拉选择全量用户，否则是普通用户，使用当前用户id
    if ("admin".includes(this.user.roles)) {
      this.getList();
      this.formInline.userId = this.user.id;
    }
    // 是否是编辑
    if (this.isEdit) {
      this.formInline = this.objData;
    } else {
      this.resetForm();
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listAllUser({}).then(res => {
        res.data.forEach(item => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId
          });
        });
      });
    },
    btnQuxiao() {
      this.$emit("handleCancle");
    },
    // 新增、编辑提交
    handleSubmit() {
      let apiUrl = this.isEdit ? edit : add;
      apiUrl({
        ...this.formInline,
        accountExList: !this.formInline.accountExList
          ? []
          : this.formInline.accountExList
      }).then(res => {
        if (res.code === 200) {
          this.$emit("handleCancle");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.formInline = {
        userId: this.user.id,
        companyName: "",
        promotionConsultant: "", //
        website: "", //
        websiteName: "", //
        consultantPhone: "", //
        infoStatus: "", //
        marginStatus: "", //
        qualificationsStatus: "", //
        complianceStatus: "", //
        creditStatus: "", //
        addvStatus: "", //
        searchBalance: "", //
        creditStatus: "", //
        addvStatus: "", //
        searchBalance: "", //
        searchBudget: "", //
        infoFlowBalance: "", //
        infoFlowBudget: "", //
        ecommerceBalance: "", //
        ecommerceBudget: "", //
        searchProhibit: "", //
        infoFlowProhibit: "", //
        ecommerceProhibit: "", //
        mediumProhibit: "", //
        searchPromotionStatus: "", //
        infoPromotionStatus: "", //
        ecommercePromotionStatus: "", //
        loginTime: "", //
        industryInfo: "", //
        whereCity: "", //
        mailAddress: "", //
        contacts: "", //
        landline: "", //
        phone: "", //
        postalCode: "", //
        email: "", //
        fax: "", //
        invoiceMailingContacts: "", //
        invoiceMailingPhone: "", //
        invoiceMailingCode: "", //
        invoiceMailingAddress: "", //
        creditAuth: "", //
        creditValue: "", //
        safetyRating: "", //
        accountExList: [
          // {
          //   mailAddress: "", //
          //   contacts: "", //
          //   landline: "", //
          //   phone: "", //
          //   postalCode: "", //
          //   email: "", //
          //   fax: "" //
          // }
        ] //
      };
    }
  }
};
</script>
<style scoped>
.queding {
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;
}
.form-header {
  width: 492px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
